<template>
  <div class="content">
    <el-upload
      :action="actionURL"
      ref="upload"
      :headers="headers"
      :data="uploadData"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload"
      :show-file-list="true"
      :auto-upload="false"
      list-type="picture"
      multiple>
      <!-- <i class="el-icon-upload"></i> -->
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
    </el-upload>
  </div>
</template>

<script>
import { debug } from 'util';
  export default {
    data() {
      return {
        token: undefined,
        headers: {},
        actionURL: '',
        uploadData: {},

        uploadFileIds:[]
      }
    },
    mounted() {
      this.token = this.$cookie.get('token')
      this.headers.token = this.token
      this.actionURL = this.$http.adornUrl('/fileAction/uploadFile3')
    },
    methods: {
      uploadSuccess(file) {
        if (file.code == 0) {
          this.uploadFileIds.push(file.fileId)
          this.$cookie.set('uploadFileIds', this.uploadFileIds.join(","))
        } else {
          this.$message({
            message: file.msg,
            type: 'warning',
            center: true
          })
        }
      },
      uploadError() {
        this.$message({
          message: '上传失败！请重新上传！',
          type: 'warning',
          center: true
        })
      },
      beforeUpload(files) {
        this.uploadData = {
          mark: '多文件上传',
          file: files
        }
      },
      submitUpload() {
        this.$refs.upload.submit()
      },
      clearHistory(){
         this.uploadFileIds = []
         this.$cookie.delete('uploadFileIds')
         this.$refs.upload.clearFiles()
      }
    }
  }
</script>

<style scoped>

</style>
